import useDocumentTitle from '@/hooks/useDocumentTitle';

import React, { useState } from 'react';
import { Header } from '../components/Header/Header';

import { Hero } from '../components/Feature/Hero';
import { PrimaryFeatures } from '../components/Feature/PrimaryFeatures';
import { SecondaryFeatures } from '../components/Feature/SecondaryFeatures';
import { Reviews } from '../components/Feature/Reviews';

import { Footer } from '../components/Footer';

import beamsComponents from '../images/beams-components.png'

export default function Home() {
  const [isImageLoaded, setImageLoaded] = useState(false);
  useDocumentTitle('特色-高考志愿填报系统');

  return (
    <>
      <Header />
      <div className="relative -mt-[7rem] bg-slate-50 pt-[5.75rem] select-none">
        <div className="absolute inset-0 overflow-hidden opacity-75">
          <img
            src={beamsComponents}
            alt=""
            className={`absolute bottom-0 ${isImageLoaded ? '' : 'hidden'} lg:block w-[1000px] h-[700px] left-[calc(44%)]`}
            onLoad={() => setImageLoaded(true)}
          />
        </div>
        <Hero />
      </div>
      <PrimaryFeatures />
      <SecondaryFeatures />
      <div className="bg-gray-50 select-none">
        <Reviews />
      </div>
      <Footer />
    </>
  )
}